<template>
  <div class="ai-doc-page">
    <!-- 导航栏组件 -->
    <NavBar
      :is-logged-in="isLoggedIn"
      @login="login"
      @go-to-console="goToConsole"
      @toggle-theme="toggleTheme"
      :theme-icon="themeIcon"
    />
    
    <!-- 页面标题区域 -->
    <div class="page-title-section">
      <div class="container">
        <h1 class="page-title">AI 知识文档</h1>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="doc-content">
      <!-- 左侧边栏导航 -->
      <div class="side-nav">
        <div class="nav-sticky">
          <ul class="side-menu">
            <li class="menu-item active" @click="scrollToSection('overview')">
              <i class="fas fa-info-circle"></i>
              <span>AI知识概述</span>
            </li>
            <li class="menu-item" @click="scrollToSection('services')">
              <i class="fas fa-concierge-bell"></i>
              <span>核心概念</span>
            </li>
            <li class="menu-item" @click="scrollToSection('architecture')">
              <i class="fas fa-sitemap"></i>
              <span>AI技术体系</span>
            </li>
            <li class="menu-item" @click="scrollToSection('advantages')">
              <i class="fas fa-star"></i>
              <span>应用领域</span>
            </li>
            <li class="menu-item" @click="scrollToSection('tips')">
              <i class="fas fa-lightbulb"></i>
              <span>使用技巧</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="main-content">
        <!-- AI知识概述 -->
        <section id="overview" class="content-section">
          <h2 class="section-title">AI知识概述</h2>
          <div class="section-content">
            <p>{{ aiDocumentation.detail.overview }}</p>
            <div class="knowledge-point">
              <h3>人工智能的定义</h3>
              <p>人工智能（Artificial Intelligence，简称AI）是计算机科学的一个分支，旨在开发能够模拟人类智能行为的系统和软件。人工智能的核心目标是使机器能够像人类一样思考、学习、推理和解决问题。</p>
            </div>
            <div class="knowledge-point">
              <h3>人工智能的发展历程</h3>
              <p>人工智能的概念最早由计算机科学家约翰·麦卡锡在1956年的达特茅斯会议上提出。自那时以来，AI经历了多次繁荣与低谷：</p>
              <ul>
                <li><strong>第一次AI浪潮（1950s-1970s）</strong>：符号主义AI的兴起，专家系统的发展</li>
                <li><strong>第一次AI寒冬（1970s-1980s）</strong>：计算资源不足，预期过高</li>
                <li><strong>第二次AI浪潮（1980s-1990s）</strong>：专家系统和机器学习的发展</li>
                <li><strong>第二次AI寒冬（1990s-2000s）</strong>：专家系统局限性显现</li>
                <li><strong>第三次AI浪潮（2010s至今）</strong>：深度学习和大数据驱动的AI复兴</li>
              </ul>
            </div>
          </div>
        </section>

        <!-- 核心概念 -->
        <section id="services" class="content-section">
          <h2 class="section-title">核心概念</h2>
          <div class="section-content">
            <div class="concepts-grid">
              <div v-for="(concept, index) in aiDocumentation.detail.concepts" :key="index" class="concept-item">
                <div class="concept-icon">
                  <span class="concept-number">{{ index + 1 }}</span>
                </div>
                <div class="concept-content">
                  <h3 class="concept-title">{{ concept.title }}</h3>
                  <p class="concept-description">{{ concept.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- AI技术体系 -->
        <section id="architecture" class="content-section">
          <h2 class="section-title">AI技术体系</h2>
          <div class="section-content">
            <p>{{ aiDocumentation.detail.architecture }}</p>
            <div class="tech-stack">
              <h3>AI核心技术栈</h3>
              <div class="tech-layers">
                <div class="tech-layer">
                  <h4>基础设施层</h4>
                  <p>包括算力资源（GPU/TPU）、存储系统、网络基础设施等硬件环境，为AI应用提供算力支持。</p>
                </div>
                <div class="tech-layer">
                  <h4>数据层</h4>
                  <p>包括数据采集、清洗、标注、存储和管理，高质量的数据是AI系统成功的基础。</p>
                </div>
                <div class="tech-layer">
                  <h4>算法层</h4>
                  <p>包括机器学习算法、深度学习模型、强化学习、自然语言处理等核心算法。</p>
                </div>
                <div class="tech-layer">
                  <h4>平台层</h4>
                  <p>包括模型训练平台、推理部署平台、监控管理平台等，提供AI应用开发和运维支持。</p>
                </div>
                <div class="tech-layer">
                  <h4>应用层</h4>
                  <p>包括各种垂直领域的AI应用，如智能客服、图像识别、语音识别等。</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 应用领域 -->
        <section id="advantages" class="content-section">
          <h2 class="section-title">应用领域</h2>
          <div class="section-content">
            <p>人工智能技术已广泛应用于各个行业，为社会经济发展带来了深远影响。以下是AI技术的主要应用领域：</p>
            <div class="application-areas">
              <div v-for="(area, index) in aiDocumentation.detail.applications" :key="index" class="application-card">
                <div class="application-header">
                  <i :class="['fas', 'fa-' + area.icon]"></i>
                  <h3>{{ area.name }}</h3>
                </div>
                <p>{{ area.description }}</p>
              </div>
            </div>
          </div>
        </section>

        <!-- 使用技巧 -->
        <section id="tips" class="content-section">
          <h2 class="section-title">大模型使用技巧</h2>
          <div class="section-content">
            <div class="tips-content">
              <div class="tip-item" v-for="(tip, index) in aiDocumentation.detail.tips" :key="index">
                <div class="tip-number">{{ index + 1 }}</div>
                <div class="tip-text">
                  <h3>{{ tip.title }}</h3>
                  <p>{{ tip.content }}</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    
    <!-- 页脚组件 -->
    <Footer />
  </div>
</template>

<script>
import NavBar from '@/layout/UserView/NavBar.vue'
import Footer from '@/layout/UserView/Footer.vue'

export default {
  name: 'AIDocumentation',
  components: {
    NavBar,
    Footer
  },
  layout: 'empty',
  data() {
    return {
      isLoggedIn: false,
      themeIcon: 'fas fa-moon',
        aiDocumentation: {
        id: 'ai-knowledge',
        title: 'AI 知识文档',
        description: '全面了解人工智能基础知识、技术体系和应用实践',
        detail: {
          overview: '本文档系统介绍人工智能的基础知识、发展历程、技术体系和应用领域，帮助用户全面了解AI技术的核心概念和实践应用。内容涵盖了从基础定义到前沿技术的完整知识体系，适合各级别用户学习参考。',
          architecture: 'AI技术体系是一个多层次、多维度的复杂系统，从底层基础设施到上层应用形成完整的技术栈。系统的核心是算法层，包括机器学习、深度学习等核心技术；数据层提供海量训练数据；基础设施层提供强大算力支持；平台层简化开发和部署流程；应用层则面向具体业务场景提供解决方案。',
          concepts: [
            {
              title: '什么是AI模型',
              description: 'AI模型是一种数学表示或算法结构，通过学习数据中的模式来执行特定任务。一个典型的AI模型通常包含输入层、处理层和输出层三个核心组件。'
            },
            {
              title: '什么是大模型',
              description: '大模型通常指参数量达到数十亿甚至数千亿级别的深度学习模型，如GPT系列、BERT等。这些模型通过海量数据预训练，具备强大的语言理解和生成能力。'
            },
            {
              title: '机器学习与深度学习',
              description: '机器学习是AI的一个分支，让计算机通过数据学习而无需显式编程。深度学习是机器学习的一个子集，通过模拟人脑神经网络结构的多层网络进行学习。'
            },
            {
              title: '自然语言处理',
              description: '自然语言处理(NLP)是AI的一个重要分支，研究如何使计算机能够理解、解释和生成人类语言，包括文本分类、情感分析、机器翻译等任务。'
            },
            {
              title: '计算机视觉',
              description: '计算机视觉是AI的另一个重要分支，研究如何使计算机能够理解和分析图像和视频，包括图像识别、物体检测、图像分割等任务。'
            }
          ],
          applications: [
            {
              name: '金融领域',
              description: '智能风控、算法交易、智能客服、欺诈检测等应用，提升金融服务效率和安全性。',
              icon: 'credit-card'
            },
            {
              name: '医疗健康',
              description: '医学影像分析、疾病诊断辅助、个性化治疗方案、健康管理等，提高医疗服务质量。',
              icon: 'heartbeat'
            },
            {
              name: '交通出行',
              description: '自动驾驶、智能交通管理、路线优化、交通预测等，提升出行效率和安全性。',
              icon: 'car'
            },
            {
              name: '智能制造',
              description: '预测性维护、质量控制、供应链优化、智能机器人等，提高生产效率和产品质量。',
              icon: 'industry'
            },
            {
              name: '教育领域',
              description: '个性化学习、智能辅导、自动评分、教育资源推荐等，提升教育效果和体验。',
              icon: 'graduation-cap'
            },
            {
              name: '客户服务',
              description: '智能客服、聊天机器人、客户需求分析、情感分析等，提升客户体验和服务效率。',
              icon: 'headset'
            }
          ],
          tips: [
            {
              title: '明确问题，精准提问',
              content: '向大模型提问时，应尽量具体、明确地描述问题，提供足够的上下文信息，避免模糊不清的表达。'
            },
            {
              title: '提供示例，引导生成',
              content: '在需要大模型生成特定格式内容时，可以提供1-2个示例，帮助模型理解预期输出格式和风格。'
            },
            {
              title: '逐步细化，迭代优化',
              content: '对于复杂问题，可以采用分步骤提问的方式，先获取基础信息，再逐步深入细化，通过迭代优化得到满意答案。'
            },
            {
              title: '核对信息，验证准确性',
              content: '由于大模型可能产生幻觉或知识偏差，对重要信息应进行交叉验证，特别是涉及专业领域或时效性要求高的内容。'
            },
            {
              title: '合理使用提示词技巧',
              content: '学习和掌握提示词工程技巧，如使用"逐步思考"、"详细解释"等指令，引导模型生成更全面、深入的内容。'
            }
          ]
        },
        images: [
          '/img/case-data-analysis-1.svg',
          '/img/case-risk-prevention-1.svg'
        ]
      }
    }
  },
  computed: {
    docImageUrl() {
      return this.aiDocumentation.images && this.aiDocumentation.images.length > 0
        ? this.aiDocumentation.images[0]
        : '/img/placeholder.svg'
    }
  },
  created() {
    // 创建防抖函数
    this.debounce = function(func, wait) {
      let timeout
      return function() {
        const context = this
        const args = arguments
        clearTimeout(timeout)
        timeout = setTimeout(() => func.apply(context, args), wait)
      }
    }
  },
  mounted() {
    // 添加滚动事件监听
    this.updateActiveSection = this.debounce(this.updateActiveSection, 100)
    window.addEventListener('scroll', this.updateActiveSection)
    
    // 初始化时设置默认活动项
    setTimeout(() => {
      this.setActiveSection('overview')
    }, 100)
  },
  beforeDestroy() {
    // 移除滚动事件监听
    window.removeEventListener('scroll', this.updateActiveSection)
  },
  methods: {
    scrollToSection(sectionId) {
      const element = document.getElementById(sectionId)
      if (element) {
        // 添加动画效果
        element.scrollIntoView({ behavior: 'smooth' })
        
        // 更新侧边栏激活状态
        this.setActiveSection(sectionId)
      }
    },
    
    // 设置活动菜单项
    setActiveSection(sectionId) {
      // 移除所有活动状态
      document.querySelectorAll('.menu-item').forEach(item => {
        item.classList.remove('active')
      })
      
      // 查找并设置当前活动项 - 按照导航栏顺序排列
      const sectionOrder = ['overview', 'services', 'architecture', 'advantages', 'tips']
      
      // 尝试直接通过sectionId查找
      let activeItem = document.querySelector(`.menu-item[onclick*="scrollToSection('${sectionId}')"]`)
      
      // 如果直接查找失败，尝试通过section在数组中的位置查找
      if (!activeItem && sectionOrder.includes(sectionId)) {
        const menuItems = document.querySelectorAll('.menu-item')
        const index = sectionOrder.indexOf(sectionId)
        if (index >= 0 && index < menuItems.length) {
          activeItem = menuItems[index]
        }
      }
      
      // 如果找到了活动项，添加active类并强制重绘
      if (activeItem) {
        // 强制重绘以确保样式正确应用
        activeItem.style.display = 'none'
        activeItem.offsetHeight // 触发重排
        activeItem.style.display = ''
        
        // 添加active类
        activeItem.classList.add('active')
      }
    },
    
    // 更新活动区域
    updateActiveSection() {
      const sections = [
        { id: 'overview', element: document.getElementById('overview') },
        { id: 'services', element: document.getElementById('services') },
        { id: 'architecture', element: document.getElementById('architecture') },
        { id: 'advantages', element: document.getElementById('advantages') },
        { id: 'tips', element: document.getElementById('tips') }
      ].filter(section => section.element) // 过滤掉不存在的元素
      
      // 获取视口高度和滚动位置
      const viewportTop = window.scrollY
      const viewportBottom = viewportTop + window.innerHeight
      
      // 找到最靠近视口顶部或大部分在视口中的部分
      let activeSection = null
      let minDistance = Infinity
      
      for (const section of sections) {
        const rect = section.element.getBoundingClientRect()
        const sectionTop = viewportTop + rect.top
        const sectionBottom = sectionTop + rect.height
        
        // 优先选择大部分在视口中的部分（顶部<=150且底部>=150）
        if (rect.top <= 150 && rect.bottom >= 150) {
          activeSection = section.id
          break
        }
        
        // 否则选择距离视口顶部最近的部分
        const distance = Math.abs(rect.top)
        if (distance < minDistance) {
          minDistance = distance
          activeSection = section.id
        }
      }
      
      // 如果找到活动部分，更新侧边栏状态
      if (activeSection) {
        this.setActiveSection(activeSection)
      }
    },
    login() {
      // 模拟登录
      this.isLoggedIn = true;
    },
    goToConsole() {
      // 导航到控制台
      alert('跳转到控制台');
    },
    toggleTheme() {
      // 切换主题
      this.themeIcon = this.themeIcon === 'fas fa-moon' ? 'fas fa-sun' : 'fas fa-moon';
    }
  }
}
</script>

<style scoped>
.ai-doc-page {
  --primary: #1e40af;
  --primary-light: #3b82f6;
  --primary-dark: #1e3a8a;
  --bg-white: #ffffff;
  --bg-light: #f8fafc;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --border-light: #e2e8f0;
  --accent: #3b82f6;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --transition: all 0.3s ease;
}

.ai-doc-page {
  min-height: 100vh;
  background-color: var(--bg-light);
}

/* 页面标题区域样式 */
.page-title-section {
  background-color: #f8f9fa;
  padding: 30px 0;
  border-bottom: 1px solid #e9ecef;
  margin-top: 70px; /* 为导航栏留出空间 */
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
  text-align: center;
}

/* 添加container样式确保页面上半部分内容居中 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.doc-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  line-height: 1.6;
}

.image-area {
  flex: 0 0 400px;
}

.hero-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.banner-image {
  width: 100%;
  height: auto;
  display: block;
}

.ppt-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px 20px;
}

.slide-indicators {
  display: flex;
  margin-left: -4px; /* 负边距，用于替代gap */
  margin-bottom: 8px;
}

.slide-indicators .indicator {
  margin-left: 4px; /* 正边距，替代gap */
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.indicator.active {
  background: white;
}

.slide-title {
  font-size: 16px;
  font-weight: 600;
}

/* 内容区域样式 */
.doc-content {
  display: flex;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 30px;
}

/* 为子元素添加正边距，替代gap属性 */
.doc-content > * {
  margin-left: 25px;
}

.main-content {
  flex: 1;
  margin-left: 25px; /* 增加主内容与侧边栏的间距 */
  max-width: calc(100% - 260px);
}

/* 侧边导航样式 */
.side-nav {
  flex: 0 0 260px;
}

.nav-sticky {
  position: sticky;
  top: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.side-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.menu-item:hover {
  background-color: #f8f9fa;
}

.menu-item.active {
  background-color: #e7f3ff !important;
  border-left-color: #007bff !important;
  color: #007bff !important;
  font-weight: 600 !important;
  position: relative;
  z-index: 10;
  box-shadow: inset 0 0 0 1000px #e7f3ff;
  border-left: 4px solid #007bff;
}

.menu-item i {
  margin-right: 12px; /* 使用margin替代gap */
  width: 20px;
  text-align: center;
  flex-shrink: 0; /* 确保图标不会被压缩 */
}

/* 主内容样式 */
.main-content {
  flex: 1;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 50px;
}

.content-section {
  margin-bottom: 50px;
}

.section-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 25px;
  color: #1a202c;
  padding-bottom: 15px;
  border-bottom: 2px solid #e2e8f0;
}

.section-content {
  line-height: 1.7;
  color: #4a5568;
}

.section-content p {
  margin-bottom: 20px;
}

/* 知识要点样式 */
.knowledge-point {
  background: #f7fafc;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  border-left: 4px solid #007bff;
}

.knowledge-point h3 {
  color: #1a202c;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.knowledge-point ul {
  padding-left: 20px;
  margin-bottom: 0;
}

.knowledge-point li {
  margin-bottom: 8px;
}

/* 架构图样式 */
.architecture-diagram {
  text-align: center;
  margin: 30px 0;
}

.diagram-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 技术栈样式 */
.tech-stack {
  margin-top: 30px;
}

.tech-stack h3 {
  margin-bottom: 20px;
  color: #1a202c;
}

.tech-layers {
  display: flex;
  flex-direction: column;
}

.tech-layer {
  margin-bottom: 15px; /* 替代gap属性 */
  /* 移除最后一个元素的margin */
}

.tech-layer:last-child {
  margin-bottom: 0;
}

.tech-layer {
  background: #f7fafc;
  border-radius: 8px;
  padding: 20px;
  border-left: 4px solid #3182ce;
}

.tech-layer h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #2c5282;
}

/* 核心概念网格样式 */
.concepts-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 20px -10px 0;
}

.concept-item {
  flex: 0 0 calc(50% - 20px);
  margin: 0 10px 20px;
  box-sizing: border-box;
  background: #f7fafc;
  border-radius: 8px;
  padding: 25px;
  display: flex;
  align-items: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 为Flexbox中的元素添加兼容性间距 */
.concept-item .concept-icon {
  margin-right: 15px; /* 替代gap属性 */
}

.concept-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.concept-icon {
  background: #007bff;
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  font-weight: bold;
}

.concept-number {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.concept-content h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #1a202c;
  font-size: 1.2rem;
}

.concept-description {
  margin: 0;
  color: #4a5568;
}

/* 应用领域样式 */
.application-areas {
  margin-top: 30px;
}

/* 应用领域网格 */
.applications-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.application-item {
  flex: 0 0 calc(50% - 20px);
  margin: 0 10px 20px;
  box-sizing: border-box;
}

.application-card {
  background: #f7fafc;
  border-radius: 8px;
  padding: 25px;
  border-top: 4px solid #007bff;
}

.application-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.application-header i {
  margin-right: 12px;
  color: #007bff;
  font-size: 24px;
}

.application-header h3 {
  margin: 0;
  color: #1a202c;
  font-size: 1.2rem;
}

/* 使用技巧样式 */
.tips-content {
  margin-top: 20px;
}

.tip-item {
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e2e8f0;
}

.tip-number {
  margin-right: 20px; /* 替代gap属性 */
}

.tip-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.tip-number {
  background: #007bff;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  flex-shrink: 0;
}

.tip-text h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #1a202c;
}

.tip-text p {
  margin: 0;
}

/* 修复NavBar透明问题 */
.ai-doc-page >>> .navbar {
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .doc-content {
    flex-direction: column;
  }
  
  .side-nav {
    flex: none;
  }
  
  .nav-sticky {
    position: relative;
    top: 0;
  }
  
  .header-content {
    flex-direction: column;
    text-align: center;
  }
  
  .text-area {
    padding-right: 0;
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
    .main-content {
      padding: 25px;
    }
    
    .concepts-grid,
    .applications-grid {
      margin: 20px 0 0;
    }
    
    .concept-item,
    .application-item {
      flex: 0 0 100%;
      margin: 0 0 20px;
    }
    
    .doc-title {
      font-size: 2rem;
    }
  
  .section-title {
    font-size: 1.5rem;
  }
}
</style>